import React, { Component } from 'react';
import moment from 'moment'
import { connect } from 'react-redux'
import { Modal, Form, Input,Select ,DatePicker ,Radio,Button,Row,Col,InputNumber} from 'antd';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option =Select.Option;

class ContractModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  okHandler = () => {
     const { onOk,form} = this.props;
     this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values);
        onOk(values,form);
      }
     });
  };
  cancelHandler=()=>{
    const { onCancel } = this.props;
    this.props.form.resetFields();
    onCancel();
  }

checkAmount=(rule, value, callback)=>{
   const { onOk,form} = this.props;
  let taxAmount=form.getFieldValue("taxAmount");
  if(value==null||value==''){
    callback(new Error('请输入合同金额'));
  }else if(taxAmount!=null&&value<taxAmount){
      callback(new Error('去税金额不能大于合同金额'));
  }else{
    callback();
  }
}
checkTaxAmount=(rule, value, callback)=>{
   const { onOk,form} = this.props;
  let amount=form.getFieldValue("amount");
  if(value==null||value==''){
    callback(new Error('请输入去税金额'));
  }else if(amount!=null&&amount<value){
      callback(new Error('去税金额不能大于合同金额'));
  }else{
    callback();
  }
}
checkSigningDate=(rule, value, callback)=>{
 const { onOk,form} = this.props;
 let effectiveDate=form.getFieldValue("effectiveDate");
 console.log(effectiveDate);
 console.log(value);
 if(value==null||value==''){
   callback(new Error('请选择签订日期'));
 }else if(effectiveDate!=null&&effectiveDate!=''&&effectiveDate<value){
     callback(new Error('签订日期不能大于生效日期'));
 }else{
   callback();
 }
}
checkEffectiveDate=(rule, value, callback)=>{
 const { onOk,form} = this.props;
 let signingDate=form.getFieldValue("signingDate");
 if(value==null||value==''){
   callback(new Error('请选择签订日期'));
 }else if(signingDate!=null&&signingDate!=''&&value<signingDate){
     callback(new Error('生效日期不能小于签订日期'));
 }else{
   callback();
 }
}
  render() {
    const { children, dispatch,item,roomList,userList,isShowUser,rackList,editDetailHandler,addDetailHandler } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };

    return (
      <span>
        <Modal
            maskClosable= {this.props.maskClosable}
            confirmLoading= {this.props.confirmLoading}
            title={this.props.title}
            visible={this.props.visible}
            onOk={this.okHandler}
            onCancel={this.cancelHandler}
            key={this.props.newKey}
          >
          <Form layout='horizontal' onSubmit={this.okHandler}>
            <Row>
              <Col span={24}>
                <FormItem style={{marginBottom:'0px'}}>
                  {getFieldDecorator('id',{initialValue:item.id_})(
                    <Input type="hidden"/>
                  )}
                  </FormItem>
                <FormItem {...formItemLayout}
                  label="合同编号" hasFeedback>
                  {getFieldDecorator('no', {
                    initialValue: item.no,
                    rules: [{
                      required: true, whitespace: true, message: '请输入合同编号',
                    },{
                      max:20,message: '合同编号不能超过20个字',
                    }]
                    })(<Input />)
                    }
                  </FormItem>
                  </Col>
                  </Row>
                  <Row>
                  <Col span={24}>
                  <FormItem {...formItemLayout}
                    label="合同名称" hasFeedback>
                    {getFieldDecorator('name', {
                        initialValue: item.name,
                        rules: [{
                          required: true, whitespace: true, message: '请输入合同名称',
                        },{
                          max:50,message: '合同名称不能超过50个字',
                        }]
                      })(<Input />)
                      }
                    </FormItem>
                    </Col>
                    </Row>
                    <Row>
                    <Col span={24}>
                    <FormItem {...formItemLayout}
                      label="类型" hasFeedback>
                        {getFieldDecorator('type', {
                            initialValue:  item.type==null?'':item.type+'',
                            rules: [{
                              required: true, whitespace: true, message: '请输入合同名称',
                            }]
                           })(
                             <Select
                             showSearch
                             style={{ width: 200 }}
                             placeholder="选择类型"
                             optionFilterProp="children"
                           >
                           <Option value="1">买卖合同</Option>
                           <Option value="2">赠与合同</Option>
                           <Option value="3">租赁合同</Option>
                           <Option value="4">借用合同</Option>
                           </Select>
                            )}
                      </FormItem>
                      </Col>
                      </Row>
                      <Row>
                      <Col span={24}>
                      <FormItem {...formItemLayout}
                            label="金额" hasFeedback>
                        {getFieldDecorator('amount', {
                            initialValue: item.amount,
                            rules: [{
                              required: true, message: '请输入金额',
                            },{validator: this.checkAmount}]
                          })(<InputNumber min={0} max={999999999} step={0.01} style={{width:150}}/>)
                        }
                      </FormItem>
                      </Col>
                      </Row>
                      <Row>
                      <Col span={24}>
                      <FormItem
                            {...formItemLayout}
                              label="去税合同额"
                              hasFeedback
                            >
                            {
                              getFieldDecorator('taxAmount', {
                                initialValue: item.taxAmount,
                                rules: [{
                                  required: true, message: '请输入去税合同额',
                                },{validator: this.checkTaxAmount}]
                              })(<InputNumber min={0} max={999999999} step={0.01} style={{width:150}}/>)
                            }
                        </FormItem>
                        </Col>
                        </Row>
                        <Row>
                        <Col span={24}>
                        <FormItem
                          {...formItemLayout}
                          label="签订日期"
                          >
                          {getFieldDecorator('signingDate', {
                            initialValue:item.signingDate==undefined?"":new moment(item.signingDate),
                            rules: [{
                              required: true,  message: '请选择签订日期',
                            },{validator: this.checkSigningDate}]
                          })(<DatePicker style={{ width: 180 }} />)}
                      </FormItem>
                      </Col>
                      </Row>
                      <Row>
                      <Col span={24}>
                      <FormItem
                          {...formItemLayout}
                          label="生效日期"
                          >
                          {getFieldDecorator('effectiveDate', {
                            initialValue:item.effectiveDate==undefined?"":new moment(item.effectiveDate),
                            rules: [{
                              required: true, message: '请选择生效日期',
                            },{validator: this.checkEffectiveDate}]
                          })(<DatePicker style={{ width: 180 }} />)}
                      </FormItem>
                      </Col>
                      </Row>
                      <Row>
                      <Col span={24}>
                      <FormItem
                            {...formItemLayout}
                              label="有效期(月)"
                              hasFeedback
                            >
                            {
                              getFieldDecorator('validityPerio', {
                                initialValue: item.validityPerio,
                              })(<InputNumber min={0} max={999999999} step={1} />)
                            }
                        </FormItem>
                        </Col>
                        </Row>
                        <Row>
                        <Col span={24}>
                        <FormItem
                                {...formItemLayout}
                                  label="描述"
                                  hasFeedback
                                >
                                {
                                  getFieldDecorator('describe', {
                                    initialValue:  item.describe,
                                  })(<Input type="textarea" autosize={{ minRows: 3, maxRows: 6 }}/>)
                                }
                        </FormItem>
                        </Col>
                        </Row>
                </Form>
        </Modal>
      </span>
    );
  }

}

export default Form.create()(ContractModal)
